<template>
    <div>
      <Header :userName="userName"></Header>
      <section>
        <Routers></Routers>
        <div id="section" class="main">
          <div class="common_header">
            <span class="common_header_tip">标准制定管理</span>
          </div>

          <ul class="list">
            <li>
              <span class="list_title">公司名称</span>
              <p class="list_content">{{com_name}}</p>
            </li>
            <li>
              <span class="list_title">所在地</span>
              <p class="list_content">{{com_adress}}</p>
            </li>
            <li>
              <span class="list_title">联系人</span>
              <p class="list_content">{{userName}}</p>
              <span class="list_btn" @click="edituserName">修改</span>
            </li>
            <li>
              <span class="list_title">手机号</span>
              <p class="list_content">{{userPhone}}</p>
              <span class="list_btn" @click="editPhone">修改</span>
            </li>
            <li>
              <span class="list_title">密码</span>
              <p class="list_content">**********</p>
              <span class="list_btn" @click="editpwd">修改</span>
            </li>
          </ul>

          <!--修改联系人的弹框-->
          <div class="tankuang_box" v-show="edituserNameisSHOW">
            <!--里面的白色盒子（需要自己设置宽高）-->
            <div class="add_tankuang">
              <!--顶部的文字和叉叉（通用）-->
              <div class="add_tankuang_header">
                <span>修改联系人</span>
                <i class="iconfont icon-guanbi" @click="closeBox"></i>
              </div>
              <div class="add_tankuang_content">
                <div class="add_tankuang_content_box">
                  <!--这里的内容是根据需要的内容加入（不通用）-->
                  <ul class="common_tankuang_content">
                    <li>
                      <span>联系人：</span>
                      <input type="text" v-model="edituserName_name" :placeholder="edituserName_name_placeholder" :class="{'error':edituserName_name_iserror}">
                    </li>
                  </ul>
                  <!--底部的按钮（通用）-->
                  <div class="add_tankuang_btnBOX">
                    <button class="add_tankuang_btn add_tankuang_btn_first" @click="saveEdituserName">保存</button>
                    <button class="add_tankuang_btn" @click="cancelSave">取消</button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!--修改密码的弹框-->
          <div class="tankuang_box" v-show="editPWDisSHOW">
            <!--里面的白色盒子（需要自己设置宽高）-->
            <div class="add_tankuang">
              <!--顶部的文字和叉叉（通用）-->
              <div class="add_tankuang_header">
                <span>修改密码</span>
                <i class="iconfont icon-guanbi" @click="closeBox"></i>
              </div>
              <div class="add_tankuang_content">
                <div class="add_tankuang_content_box">
                  <!--这里的内容是根据需要的内容加入（不通用）-->
                  <ul class="common_tankuang_content">
                    <li>
                      <span>旧密码：</span>
                      <input type="password" v-model="editPWD_oldpwd" :placeholder="editPWD_oldpwd_placeholder" :class="{'error':editPWD_oldpwd_iserror}">
                    </li>
                    <li>
                      <span>新密码：</span>
                      <input type="password" v-model="editPWD_newpwd" :placeholder="editPWD_newpwd_placeholder" :class="{'error':editPWD_newpwd_iserror}">
                    </li>
                    <li>
                      <span>再次确认新密码：</span>
                      <input type="password" v-model="editPWD_newpwd_again" :placeholder="editPWD_newpwd_again_placeholder" :class="{'error':editPWD_newpwd_again_iserror}">
                    </li>
                  </ul>
                  <p v-show="editPWD_errorText_isShow" class="error_text">{{editPWD_error_text}}</p>
                  <!--底部的按钮（通用）-->
                  <div class="add_tankuang_btnBOX">
                    <button class="add_tankuang_btn add_tankuang_btn_first" @click="saveEditPWD">保存</button>
                    <button class="add_tankuang_btn" @click="cancelSave">取消</button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!--修改手机号的弹框-->
          <div class="tankuang_box" v-show="editUserPhoneisSHOW">
            <!--里面的白色盒子（需要自己设置宽高）-->
            <div class="add_tankuang">
              <!--顶部的文字和叉叉（通用）-->
              <div class="add_tankuang_header">
                <span>修改手机号</span>
                <i class="iconfont icon-guanbi" @click="closeBox"></i>
              </div>
              <div class="add_tankuang_content">
                <div class="add_tankuang_content_box">
                  <!--这里的内容是根据需要的内容加入（不通用）-->
                  <ul class="common_tankuang_content">
                    <li>
                      <span>请输入密码：</span>
                      <input type="password" v-model="editUserPhone_pwd" :placeholder="editUserPhone_pwd_placeholder" :class="{'error':editUserPhone_pwd_iserror}">
                    </li>
                    <li>
                      <span>新手机号：</span>
                      <input type="text" v-model="editUserPhone_newPhone" :placeholder="editUserPhone_newPhone_placeholder" :class="{'error':editUserPhone_newPhone_iserror}">
                    </li>
                    <li>
                      <span>验证码：</span>
                      <input type="text" v-model="editUserPhone_yzm" id="yzm">
                      <button @click="getyzm" id="yzm_btn">{{getyzm_text}}</button>
                    </li>
                  </ul>
                  <p v-show="editUserPhone_errorText_isShow" class="error_text">{{editUserPhone_error_text}}</p>
                  <!--底部的按钮（通用）-->
                  <div class="add_tankuang_btnBOX">
                    <button class="add_tankuang_btn add_tankuang_btn_first" @click="saveEditUserPhone">保存</button>
                    <button class="add_tankuang_btn" @click="cancelSave">取消</button>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </section>

    </div>
</template>

<script>
  import Routers from '@/template/routers.vue'
  import Header from '@/template/common_header.vue'
  import lu from '@/assets/public.js'
    export default {
        name: '',
        components: {
          Header,
          Routers
        },
        data() {
            return {
              userName:this.$store.state.userName,//用户姓名
              userPhone:this.$store.state.userPhone,//用户手机号
              com_name:this.$store.state.com_name,//公司名称
              com_adress:this.$store.state.com_adress,//公司地址

              edituserNameisSHOW:false,
              edituserName_name:'',
              edituserName_name_placeholder:'请输入新的联系人名字',
              edituserName_name_iserror:false,

              editPWDisSHOW:false,//修改密码的盒子是否打开
              editPWD_oldpwd:'',//修改密码时的旧密码
              editPWD_oldpwd_placeholder:"请输入当前使用密码",
              editPWD_oldpwd_iserror:false,
              editPWD_newpwd:'',//修改密码时的新密码
              editPWD_newpwd_placeholder:'请设置新密码',
              editPWD_newpwd_iserror:false,
              editPWD_newpwd_again:'',//修改密码时的新密码again
              editPWD_newpwd_again_placeholder:'请再次输入新密码',
              editPWD_newpwd_again_iserror:false,
              editPWD_errorText_isShow:false,
              editPWD_error_text:'',

              editUserPhoneisSHOW:false,//修改手机号的盒子是否打开
              editUserPhone_pwd:'',//修改手机号时输入的密码
              editUserPhone_pwd_placeholder:"请输入当前使用密码",
              editUserPhone_pwd_iserror:false,
              editUserPhone_newPhone:'',//修改手机号时输入的新手机号
              editUserPhone_newPhone_placeholder:'请输入新的手机号',
              editUserPhone_newPhone_iserror:false,
              editUserPhone_yzm:'',//修改手机号时输入的验证码
              editUserPhone_yzm_placeholder:'请输入验证码',
              editUserPhone_yzm_iserror:false,
              getyzm_text:'获取验证码',
              yzmISclick:false,
              seconds:60,
              Interval:'',
              editUserPhone_errorText_isShow:false,
              editUserPhone_error_text:''
            }
        },
        methods: {
          //关闭弹框,清空所有数据,重置所有数据
          closeBox(){
            this.editPWDisSHOW = false
            this.editPWD_oldpwd = '' //修改密码时的旧密码
            this.editPWD_oldpwd_placeholder = "请输入当前使用密码"
            this.editPWD_oldpwd_iserror = false
            this.editPWD_newpwd = '' //修改密码时的新密码
            this.editPWD_newpwd_placeholder = '请设置新密码'
            this.editPWD_newpwd_iserror = false
            this.editPWD_newpwd_again = '' //修改密码时的新密码again
            this.editPWD_newpwd_again_placeholder = '请再次输入新密码'
            this.editPWD_newpwd_again_iserror = false
            this.editPWD_errorText_isShow = false
            this.editPWD_error_text = ''

            this.editUserPhoneisSHOW = false
            this.editUserPhone_pwd = '' //修改手机号时输入的密码
            this.editUserPhone_pwd_placeholder = "请输入当前使用密码"
            this.editUserPhone_pwd_iserror = false
            this.editUserPhone_newPhone = '' //修改手机号时输入的新手机号
            this.editUserPhone_newPhone_placeholder = '请输入新的手机号'
            this.editUserPhone_newPhone_iserror = false
            this.editUserPhone_yzm = '' //修改手机号时输入的验证码
            this.editUserPhone_yzm_placeholder = '请输入验证码'
            this.editUserPhone_yzm_iserror = false
            this.getyzm_text = '获取验证码'
            this.yzmISclick = false
            this.seconds = 60
            this.Interval = ''
            this.editUserPhone_errorText_isShow = false
            this.editUserPhone_error_text = ''
          },
          //取消保存,清空所有数据,重置所有数据
          cancelSave(){
            this.editPWDisSHOW = false
            this.editPWD_oldpwd = '' //修改密码时的旧密码
            this.editPWD_oldpwd_placeholder = "请输入当前使用密码"
            this.editPWD_oldpwd_iserror = false
            this.editPWD_newpwd = '' //修改密码时的新密码
            this.editPWD_newpwd_placeholder = '请设置新密码'
            this.editPWD_newpwd_iserror = false
            this.editPWD_newpwd_again = '' //修改密码时的新密码again
            this.editPWD_newpwd_again_placeholder = '请再次输入新密码'
            this.editPWD_newpwd_again_iserror = false
            this.editPWD_errorText_isShow = false
            this.editPWD_error_text = ''

            this.editUserPhoneisSHOW = false
            this.editUserPhone_pwd = '' //修改手机号时输入的密码
            this.editUserPhone_pwd_placeholder = "请输入当前使用密码"
            this.editUserPhone_pwd_iserror = false
            this.editUserPhone_newPhone = '' //修改手机号时输入的新手机号
            this.editUserPhone_newPhone_placeholder = '请输入新的手机号'
            this.editUserPhone_newPhone_iserror = false
            this.editUserPhone_yzm = '' //修改手机号时输入的验证码
            this.editUserPhone_yzm_placeholder = '请输入验证码'
            this.editUserPhone_yzm_iserror = false
            this.getyzm_text = '获取验证码'
            this.yzmISclick = false
            this.seconds = 60
            this.Interval = ''
            this.editUserPhone_errorText_isShow = false
            this.editUserPhone_error_text = ''
          },
          //打开修改名字的弹框
          edituserName(){
            this.edituserNameisSHOW = true
          },
          //确认修改联系人
          saveEdituserName(){
            if(!this.edituserName_name){
              this.edituserName_name_placeholder = '不能为空！'
              this.edituserName_name_iserror = true
              return
            }
            this.axios.post('/index/set_person',{
              user_name:this.edituserName_name
            }).then((res)=>{
              if(res.data.code==1){
                this.edituserNameisSHOW = false
                this.userName = this.edituserName_name
                this.$store.commit('userName',this.edituserName_name)
                this.edituserName_name = ''
              }
            })
          },
          //打开修改密码的弹框
          editpwd(){
            this.editPWDisSHOW = true
          },
          //打开修改手机号的弹框
          editPhone(){
            this.editUserPhoneisSHOW = true
          },
          //确认修改密码
          saveEditPWD(){
            if(!this.editPWD_oldpwd){
              this.editPWD_oldpwd_placeholder = '不能为空!'
              this.editPWD_oldpwd_iserror = true
              return
            }
            if(!this.editPWD_newpwd){
              this.editPWD_newpwd_placeholder = '不能为空!'
              this.editPWD_newpwd_iserror = true
              return
            }
            if(!this.editPWD_newpwd_again){
              this.editPWD_newpwd_again_placeholder = '不能为空!'
              this.editPWD_newpwd_again_iserror = true
              return
            }
            if(this.editPWD_newpwd != this.editPWD_newpwd_again){
              this.editPWD_newpwd = ''
              this.editPWD_newpwd_again = ''
              this.editPWD_newpwd_placeholder = '两次输入密码不一致!'
              this.editPWD_newpwd_again_placeholder = '两次输入密码不一致!'
              this.editPWD_newpwd_iserror = true
              this.editPWD_newpwd_again_iserror = true
              return
            }
            if(!lu.regCheck(this.editPWD_newpwd,/^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,30}$/)){
              this.editPWD_newpwd = ''
              this.editPWD_newpwd_again = ''
              this.editPWD_newpwd_placeholder = '密码为6-30位包含字母和数字'
              this.editPWD_newpwd_again_placeholder = '密码为6-30位包含字母和数字'
              this.editPWD_newpwd_iserror = true
              this.editPWD_newpwd_again_iserror = true
              return
            }

            this.axios.post('/index/set_person',{
              old_pass:this.editPWD_oldpwd,
              password:this.editPWD_newpwd
            }).then((res)=>{
              this.editPWD_oldpwd_iserror = false
              this.editPWD_newpwd_iserror = false
              this.editPWD_newpwd_again_iserror = false
              if(res.data.code==1){
                this.editPWDisSHOW = false
                this.editPWD_oldpwd = ''
                this.editPWD_newpwd = ''
                this.editPWD_newpwd_again = ''
                this.editPWD_errorText_isShow = false
              }else{
                this.editPWD_errorText_isShow = true
                this.editPWD_error_text = res.data.msg
              }
            })
          },
          //获取手机号验证码
          getyzm(){
            if(this.yzmISclick)return
            if(!this.editUserPhone_newPhone){
              this.editUserPhone_newPhone_iserror = true
              this.editUserPhone_newPhone_placeholder = '手机号不得为空'
            }else{
              let that = this
              this.editUserPhone_newPhone_iserror = false
              this.yzmISclick = true
              this.axios.get('/index/get_code?situation=1&phone='+this.editUserPhone_newPhone).then((res)=>{
                this.Interval = setInterval(function(){
                  that.seconds = that.seconds - 1
                  if(that.seconds<=0){
                    clearInterval(that.Interval)
                    that.yzmISclick = false
                  }else{
                    that.getyzm_text = that.seconds+'s'
                  }
                },1000)
                if(res.data.code==0){
                  clearInterval(that.Interval)
                  this.yzmISclick = false
                  this.editUserPhone_newPhone = ''
                  this.editUserPhone_newPhone_iserror = true
                  this.editUserPhone_newPhone_placeholder = res.data.msg
                }else{

                }
              })
            }
          },
          //确认修改手机号码
          saveEditUserPhone(){
            if(!this.editUserPhone_pwd){
              this.editUserPhone_pwd_placeholder = '不能为空!'
              this.editUserPhone_pwd_iserror = true
              return
            }
            if(!this.editUserPhone_newPhone){
              this.editUserPhone_newPhone_placeholder = '不能为空!'
              this.editUserPhone_newPhone_iserror = true
              return
            }
            if(!this.editUserPhone_yzm){
              this.editUserPhone_yzm_placeholder = '不能为空!'
              this.editUserPhone_yzm_iserror = true
              return
            }
            this.axios.post('/index/set_person',{
              password:this.editUserPhone_pwd,
              user_phone:this.editUserPhone_newPhone,
              code:this.editUserPhone_yzm
            }).then((res)=>{
              if(res.data.code==1){
                this.$store.commit('userPhone',this.editUserPhone_newPhone)
                this.userPhone = this.editUserPhone_newPhone
                this.editUserPhoneisSHOW = false
                this.editUserPhone_pwd = ''
                this.editUserPhone_newPhone = ''
                this.editUserPhone_yzm = ''
                clearInterval(this.Interval)
                this.seconds = 60
                this.getyzm_text = '获取验证码'
                this.yzmISclick = false
              }else{
                this.editUserPhone_errorText_isShow = true
                this.editUserPhone_error_text = res.data.msg
              }
            })

          },

        }
    }
</script>

<style scoped>

  .add_tankuang{
    width:594px;
    height:396px;
  }
  .common_tankuang_content{
    padding:40px 0 10px;
    display: block;
  }
  .common_tankuang_content>li{
    flex:1;
  }
  .common_tankuang_content input{
    width:210px!important;
  }
  .common_tankuang_content span{
    width:200px;
  }

  .list{
    padding:30px 100px 0 100px;
  }
  .list>li{
    display: flex;
    align-items: center;
    height:79px;
    border-bottom: 1px solid #ddd;
  }
  .list_title{
    color: #444;
    font-size:15px;
    font-weight: bold;
    width:150px;
  }
  .list_content{
    color: #333;
    font-size:15px;
    flex:1;
    /*text-align: left;*/
  }
  .list_btn{
    color:#4797D4;
    font-size:15px;
    padding-right:20px;
    cursor: pointer;
  }

  .error_text{
    color: #ff0000;
    font-size:14px;
    text-align: center;
    margin-bottom: 20px;
  }

  #yzm{
    width:115px!important;
  }
  #yzm_btn{
    width:85px;
    height:30px;
    background-color: #4797D4;
    color:#fff;
    font-size:14px;
    margin-left:10px;
    box-sizing: border-box;
    border: none;
    cursor: pointer;
  }
</style>
